import { Button,message,Descriptions,Card,Tabs } from 'antd';
import React, {
  useRef,
  useState
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { initFileUploadTask } from './service';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { queryList,queryItemType } from './service';
import { useHistory } from "react-router-dom";
import { mockData } from './mock'


const TableList: React.FC<{}> = (props: any) => {
  const { TabPane } = Tabs;
  const { activityId } = props.location.query
  const actionRef = useRef<ActionType>();
  const [lock,setLock] = useState(false)
  const [info,setInfo] = useState<any>({})
  const history = useHistory();
  const onFinish = async () => {
    if (!activityId) {
      message.error('课程ID不能为空')
      return
    }
    setLock(true)
    setTimeout(()=>{
      setLock(false)
    },5000)
   const res = await initFileUploadTask({activityId})
   if(res.code === 200){
     message.success('已加入下载列表，5s后可再次导出数据')
   } else {
     message.error(res.message)
   }
  }
  const callback = ()=>{

  }
  const columns: any= [

    {
      title: '条目ID',
      dataIndex: 'itemId',
    },
    {
      title:'条目名称',
      dataIndex:'name',
      render:(_: any, record: any)=>(
        <a
          target="_blank"
          onClick={ async (e)=>{
            e.preventDefault()
            const res = await queryItemType({
              activityId,
              itemId:record.itemId
            })
            if(res.status === 200){
              if(res.data.length > 0){
                window.open(`/web/teacher-admin/learn/learn-step?activityId=${activityId}&itemId=${record.itemId}`, "_blank");
                // history.push(`/learn/learn-step?activityId=${activityId}&itemId=${record.itemId}`)
              } else {
                message.error('没有环节')
              }
            } else {
              message.error(res.message)
            }
          }}
        >
          {_}
        </a>
       )
    },
    {
      title:'条目开始时间',
      dataIndex:'startTime',
      formItemProps: {labelCol: { span: 8 }},
    },
    {
      title:'学习环节数量',
      dataIndex:'learnLinkNum',
      formItemProps: {labelCol: { span: 8 }},
    },
    {
      title:'完成所有环节人数',
      dataIndex:'finishLinkNum',
      formItemProps: {labelCol: { span: 12 }},
    },
    {
      title:'总人数',
      dataIndex:'totalNum'
    },
    {
      title:'环节完成率',
      formItemProps: {labelCol: { span: 8 }},
      dataIndex:'linkRate'
    }
  ]
  return (
    <PageContainer>
      <Card>
        <Descriptions size="small" column={2}>
          <Descriptions.Item label="课程ID">{info.activityId}</Descriptions.Item>
          <Descriptions.Item label="课程名称">{info.activityName}</Descriptions.Item>
          <Descriptions.Item label="主讲老师">{info.teacherName}</Descriptions.Item>
          <Descriptions.Item label="当前学习进度">{info.learnRate}</Descriptions.Item>
        </Descriptions>
      </Card>
      <Card>
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="学情数据" key="1">
          <ProTable<any>
          actionRef={actionRef}
          rowKey="id"
          request={async (params: any) => {

            const res = await queryList({
              ...params,
              activityId,
              pageNum: params.current
            });
            setInfo(res.data)
            return {
              data: res.data.itemList,
              success: true,
              total: res.data.count,
            };
          }}
          columns={columns}
          search={false}
          toolBarRender={() => {
            return [
              <Button
                type="primary"
                disabled={lock}
                htmlType="submit"
                style={{marginRight:'10px'}}
                onClick={onFinish}
                >
              导出学习环节数据
            </Button>
            ]
          }}
        />
        </TabPane>
      </Tabs>
      </Card>

    </PageContainer>
  );
};

export default TableList;
